<template>
  <tr class="agent-tr">
    <td class="agent">{{one.agentName}}</td>
    <td>{{one.agentNo}}</td>
    <td v-for="(item, index) in monitorHeader" v-show="item.show === true" :key="index">
      <div v-if="item.name === 'pcState'">
        <span :class="one.pcState ? 'online' : 'offline'" v-text="one.pcState ? $t('monitor.online') : $t('monitor.offline')"></span>
      </div>
      <div v-if="item.name === 'mobileState'">
        <span :class="one.mobileState ? 'online' : 'offline'" v-text="one.mobileState ? $t('monitor.online') : $t('monitor.offline')"></span>
      </div>
      <div v-show="item.name === 'autoOrderInitStatus'">
        <el-switch
          v-model="one.autoOrderInitStatus"
          active-color="#13ce66"
          active-value="order"
          @change="orderStatusChange(one.autoOrderInitStatus)"
          inactive-value="busy">
        </el-switch>
      </div>
    </td>
  </tr>
</template>
<script>
  export default {
    name: 'trAgentOrder',
    props: {
      one: {type: Object, default: function () { return {} }},
      monitorHeader: {type: Array, default: function () { return [] }}
    },
    methods: {
      orderStatusChange(item) {
        this.$store
            .dispatch('updateAutoOrderInitStatus', {
              _id: this.one.userId,
              autoOrderInitStatus: item === 'order' ? 'busy' : 'order',
              type: 'agentAction'
            })
            .then((req) => {

            })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl';
  .agent-tr
    display table
    width 100%
    table-layout fixed
    td
      word-break break-all
  .agent
    max-width 120px
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .online
    color #41b27f
  .offline
    color $cf-gray4
  .closed
    color $c-pink
  .button-group
    display none
    position: absolute
    top: -20px
    right 35px
    z-index 1
    background-color $cf-white
    text-align center
    padding 0 10px
    border 1px solid #eee
  .operate
    position relative
    &:hover
      .button-group
        display: block
  .indent
    text-indent 6px
</style>
